<template>
  <div class="home-container">
    <div class="userCard">
      <div class="userInfo">
        <div class="avatar">
          <img class="img" src="../../assets/avatar.png" />
        </div>
        <div class="userContent">
          <div class="userContent_item name">{{ data.userInfo.name }}</div>
          <div class="userContent_item desc">推荐商：{{ data.userInfo.parentId }}</div>
        </div>
      </div>
      <div class="user-num">
        <div class="user-num-item">
          <div class="amount">${{ data.userInfo.ytReward || 0 }}</div>
          <div>今日分红</div>
        </div>
        <div class="user-num-item">
          <div class="amount">${{ data.userInfo.monthReward || 0 }}</div>
          <div>本月分红</div>
        </div>
        <div class="user-num-item">
          <div class="amount">${{ data.userInfo.totalReward || 0 }}</div>
          <div>累计分红</div>
        </div>
      </div>

      <div class="count-main">
        <!-- <div class="count_card card" @click="toRouter('/bill')">
          <div class="header">
            <span class="title">可提现佣金： <span class="money">${{ data.userInfo.jf || 0 }}</span></span>
          </div>
          <div class="body">
            <div class="item">
              <span class="desc">今日预估收益</span>
              <span class="value money">${{ data.userInfo.ytReward || 0 }}</span>
            </div>
            <div class="item">
              <span class="desc">本月预估收益</span>
              <span class="value money">${{ data.userInfo.monthReward || 0 }}</span>
            </div>
            <div class="item">
              <span class="desc">累计获得收益</span>
              <span class="value money">${{ data.userInfo.totalReward || 0 }}</span>
            </div>
          </div>
        </div> -->
        <div class="my_team card">
        <div class="header">
            <span class="title">余额： <span class="money">${{ data.userInfo.jf || 0 }}</span></span>
          </div>
          <div class="body">
            <div class="item" @click="toRouter('/team/list')">
              <span class="desc">我的团队</span>
              <span class="value">{{ data.userInfo.teamNum || 0 }}</span>
            </div>
            <div class="item">
              <span class="desc">我的邀请码</span>
              <span class="value">{{ data.userInfo.id }}</span>
              <van-button type="primary" size="mini" @click="copyText(data.userInfo.id)">复制</van-button>
            </div>
          </div>
        </div>
        <div class="kpi_card card">
          <div class="body">
            <div class="item">
              <span class="desc">销售总额</span>
              <span class="value">${{ data.userInfo.totalOrder || 0 }}</span>
            </div>
            <!-- <div class="item">
              <span class="desc">推广总人数</span>
              <span class="value">{{ data.userInfo.totalPep || 0 }}</span>
            </div> -->
          </div>
        </div>

        <div class="card tools">
          <div class="header">
            <span class="title">
              常用工具
            </span>
          </div>
          <div class="body">
            <!--                <van-cell-group :border="false" class="home-list">-->
            <!--                    <van-cell clickable title="提现记录" center is-link size="large" title-class="home-list__item"  @click="toRouter('/withdraw')"> </van-cell>-->
            <!--                    <van-cell clickable title="我的奖励" center is-link size="large" title-class="home-list__item"  @click="toRouter('/myReward')"> </van-cell>-->
            <!--                    <van-cell clickable title="我的收款账户" center is-link size="large" title-class="home-list__item"  @click="toRouter('/myAccount')"> </van-cell>-->
            <!--                </van-cell-group>-->
            <van-grid style="width: 100%;" :border="false">
              <van-grid-item :icon="item.icon" v-for="item in gridTools" :text="item.title" @click="toRouter(item.url)" :key="item.title" />
            </van-grid>
          </div>
        </div>
        <div class="main_bd"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { UserInfo } from '@/config/api'

import clipboard3 from 'vue-clipboard3'
const { toClipboard } = clipboard3()
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
const router = useRouter()

const data = ref({
  userInfo: {
    id: '-',
    name: 'User',
    phone: '',
    level: '',
    jf: 0,
    monthReward: 0,
    ytReward: 0,
    totalReward: 0,
    teamNum: 0,
    totalOrder: 0,
    totalPep: 0
  }
})

const gridTools = ref([
  {
    icon: 'orders-o',
    title: '订单',
    url: '/order/list'
  },
  {
    icon: 'cash-back-record',
    title: '佣金',
    url: '/myReward'
  },
  {
    icon: 'after-sale',
    title: '充值',
    url: '/recharge/create'
  },
  {
    icon: 'calendar-o',
    title: '邀请海报',
    url: '/order/list'
  },
  {
    icon: 'calendar-o',
    title: '提现',
    url: '/myAccount'
  }
])

onMounted(() => {
  loadUserInfo()
})

const toRouter = (path, query = {}) => {
  router.push({ path, query })
}
const copyText = async (text) => {
  try {
    await toClipboard(text)
    showToast('复制成功')
  } catch (error) {
    showToast('复制失败')
  }
}

const loadUserInfo = () => {
  UserInfo({}).then((res) => {
    let { user } = res
    data.value.userInfo = { ...res, ...user }
  })
}
</script>

<style lang="less" scoped>
.userCard {
  width: 100%;
  height: 5rem;
  background: url('../../assets/home.png');
  background-size: cover;
  font-size: 0.47rem;
  position: relative;
  .userInfo {
    color: #fff;
    padding: 0.4rem 0.27rem 0;
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    .avatar {
      margin-right: 0.3rem;
      .img {
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 50%;
      }
    }
  }
}
.user-num {
  display: flex;
  align-items: center;
  justify-content: space-around;
  &-item {
    text-align: center;
    font-size: 0.35rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    .amount {
      font-size: 0.45rem;
      font-weight: 500;
    }
  }
}
.count-main {
  width: 100%;
  //   position: absolute;
  .count_card {
    background: white;
    margin: 0.27rem;
    border-radius: 0.13rem;
    background-size: cover;
    color: #666666;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    .body {
      text-align: left;
      .money {
        font-size: 0.36rem !important;
        color: #ff5000;
      }
    }
  }
  .my_team {
    background: #fff;
    .title{
        margin-left: 0.24rem;
        font-size: 0.4rem;
        color: #333333;
    }
    .header:after{
        background: transparent;
    }
  }
}

.card {
  margin: 0.37rem;
  border-radius: 0.13rem;
  min-height: 2.03rem;
  background: #fff;
  padding: 0.4rem 0 0;
  overflow: hidden;
  .header {
    padding-bottom: 0.27rem;
    position: relative;
    margin-left: 0.24rem;
    .title {
      font-size: 0.46rem;
      font-weight: bold;
    }
  }
  .header::after {
    width: 100%;
    height: 0.01rem;
    background: #e4e7ed;
    position: absolute;
    content: ' ';
    bottom: 0;
    left: 0;
    z-index: 99;
  }

  .body {
    display: flex;
    .item {
      display: flex;
      flex: 1;
      padding: 0.27rem 0;
      text-align: center;
      .van-button {
        margin-top: 0.13rem !important;
        width: 1.7rem;
        margin: 0 auto;
      }
    }

    .item {
      flex-direction: column;
      font-size: 0.35rem;
      .desc {
        font-size: 0.4rem;
        font-weight: bold;
      }
      .value {
        margin-top: 0.13rem;
        font-size: 0.56rem;
        font-weight: bold;
      }
    }
  }
}

.userContent_item.tag .van-tag {
  margin: 0 0.1rem;
}

.userContent_item.desc {
  font-size: 0.37rem !important;
}

.userContent_item.name {
  font-weight: 500;
}

.home-list {
  margin-top: 0.3rem;
  border-radius: 0.2rem !important;
  overflow: hidden;
  width: 100%;
}
.home-list__item {
  font-size: 0.43rem !important;
  color: #101d37;
  height: 1.07rem;
  line-height: 1.07rem;
}

.home-list__icon {
  width: 0.67rem;
  height: 0.67rem;
}
</style>
